<template>
	<view class="page ">
		<cu-custom bgColor="bg-red" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{title}}</block>
		</cu-custom>

		<view class="bg-head-box middle" :style="{backgroundImage:'url('+bgHead+')'}">
			{{headTitle}}
		</view>

		<view class="info-head-box middle">
			<view class="padding-sm flex justify-center radius shadow bg-white order-price">
				<view class="flex flex-wrap">
					<view class="text-red middle">855000元</view>
					<view class="middle">订单金额</view>
				</view>
				<view class="flex flex-wrap">
					<view class="text-gray middle">0 00元</view>
					<view class="middle text-gray">订单金额</view>
				</view>
				<image class="order-price-img" src="../../static/img/icon_score_match_miss.png" mode="widthFix"></image>
			</view>
			<view class="margin-top radius shadow bg-white">
				<view class="text-bold text-sm padding-sm">订单状态</view>
				<view class="order-status-box ">
					<view class="cu-steps ">
						<view class="cu-item middle step-box flex flex-wrap" :class="index>basics?'':'text-red+-'"
							v-for="(item,index) in basicsList" :key="index">
							<view class="order-step-box  middle" :class="index>basics?'bg-CCCCCC':'bg-red'">
								<text :class="item.cuIcon" class="iconfont"></text>
							</view>
							<text class="padding-sm text-bold">{{item.name}}</text>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="cu-list menu margin-top">
			<view class="cu-item sm-border">
				<view class="content">
					<text class="">竞彩足球混合投注</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">未中奖</text>
				</view>
			</view>
			<view class="cu-item">
				<text class="text-grey">订单金额</text>
				<view class="action">
					<text class="text-grey text-sm">85000.00元</text>
				</view>
			</view>
			<view class="cu-item">
				<text class="text-grey">预期回报</text>
				<view class="action">
					<text class="text-grey text-sm">4.32倍</text>
				</view>
			</view>
			<view class="cu-item">
				<text class="text-grey">中奖金额</text>
				<view class="action">
					<text class="text-grey text-sm">0.00</text>
				</view>
			</view>
			<view class="cu-item">
				<text class="text-grey">订单号</text>
				<view class="action">
					<text class="text-grey text-sm">548049</text>
				</view>
			</view>
			<view class="cu-item">
				<text class="text-grey">投注信息</text>
				<view class="action">
					<text class="text-grey text-sm">2串1 1注4250倍</text>
				</view>
			</view>
			<view class="cu-item">
				<text class="text-grey">下单时间</text>
				<view class="action">
					<text class="text-grey text-sm">2021-08-21 18:22:46</text>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white  margin-top solid-bottom">
			<view class="action text-gray">
				订单方案
			</view>
			<view class="action text-sm text-gray">
				赔率、盘口与奖金以实际出票为准
			</view>
		</view>

		<view class="bg-white padding order-fangan-box ">
		<view class="grid col-4  text-center" >
			<view class="border-E1E1E1 padding-sm">
				场次
			</view>
			<view class="border-E1E1E1 padding-sm">
				主队客队
			</view>
			<view class="border-E1E1E1 padding-sm">
				投注项
			</view>
			<view class="border-E1E1E1 padding-sm">
				彩果
			</view>
		</view>
				
			<view class="grid col-4  text-center" v-for="(item,index) in fananList" :key="index">
				<view class="border-E1E1E1 padding-sm">
					{{item.changci}}
				</view>
				<view class="border-E1E1E1 padding-sm">
					{{item.vs}}
				</view>
				<view class="border-E1E1E1 padding-sm">
					{{item.tou}}
				</view>
				<view class="border-E1E1E1 padding-sm">
					{{item.result}}
				</view>
			</view>
	




		</view>






	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "订单详情",
				headTitle: "竞猜足球 ",
				bgHead: "../../static/img/ds_top_bg.png",
				basicsList: [{
					cuIcon: 'icon-xiadan',
					name: '投注下单'
				}, {
					cuIcon: 'icon-jiedan',
					name: '店主接单'
				}, {
					cuIcon: 'icon-chupiao',
					name: '出票成功'
				}, {
					cuIcon: 'icon-zhongjiangjilu',
					name: '未中奖'
				}, ],
				basics: 1,
				orderList: {
					price: 0,

				},
				
				fananList:[
					{
						changci:"周六013",
						vs:"dsfda",
						tou:"111",
						result:"让球胜"
					}
				]
			}
		},
		methods: {



		}




	}
</script>

<style scoped>
	@import '../../static/font/iconfont.css';

	.bg-head-box {
		width: 100vw;
		height: 320rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;

		color: white;
		font-size: 32rpx;
		font-weight: 800;
	}

	.info-head-box {
		width: 100vw;
		padding: 20rpx;
		min-height: 200rpx;
		z-index: 1;
		display: flex;
		flex-wrap: wrap;
	}

	.info-head-box>view {
		width: 92%;

	}

	.order-price>view {
		width: 50%;
		line-height: 1.6;
		flex-direction: column;
		position: relative;

	}

	.order-status-box {
		width: 100%;
		margin-bottom: 20rpx;

	}

	.order-price-img {
		position: absolute;
		float: right;
		right: 0;
		width: 150rpx;
		margin-top: -50rpx;

	}

	.order-step-box {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.bg-CCCCCC {
		background-color: #F74A41;
	}

	.order-fangan-box {
		width: 100%;
		margin-bottom: 20rpx;
		 border-spacing: 0;
		  border-collapse: collapse;
	}
	.border-E1E1E1 {
	    margin: -1rpx -1rpx -1rpx -1rpx;
		border: 1rpx solid #E1E1E1;
	}
	
</style>
